<template>
  <div class="app-container-item">
    <div class="form-main">
      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
        <el-row :gutter="20">
          <el-col :span="8" :xs="24">
            <el-form-item label="业主头像">
              <picupload
                disabled
                width="150"
                height="200"
                title="业主头像"
                httpRequest="/common/minioUpload"
                :src.sync="form.customHeadImg"></picupload>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="业主名称" prop="ownerId">
              <el-select v-model="form.ownerId" :disabled="disabled"  placeholder="请选择业主名称">
                <el-option v-for="item in customInfoOptions"
                           :key="item.customId"
                           :label="item.customName"
                           :value="item.customId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="手机号码" prop="cellPhoneNumber">
              <el-input v-model="form.cellPhoneNumber" placeholder="请输入手机号码" :disabled="disabled"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="身份证号" prop="idCard">
              <el-input v-model="form.idCard" placeholder="请输入业主身份证号" :disabled="disabled"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="出生年月" prop="birthDate">
              <el-date-picker
                v-model="form.birthDate"
                type="date"
                placeholder="选择出生年月"
                :disabled="disabled"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="form.sex" :disabled="disabled">
                <el-radio
                  v-for="item in dict.sys_user_sex"
                  :key="item.dictValue"
                  :label="item.dictValue">
                  {{item.dictLabel}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
  import { roomMixin } from "@/views/property/houseMange/roomMixin.js"
  import { listCustomInfo } from "@/api/waitress/customInfo";
  import { updateVehicle,listVehicle } from "@/api/property/vehicle";
    export default {
      name: "customInfoFrom",
      dicts: ['custom_type', 'sys_user_sex'],
      mixins:[ roomMixin ],
      props: {
        currentNode: {
          type: Object,
          default: () => {
          }
        },
      },
      data(){
        return{
          // 表单参数
          form: {},
          currentNode: {},
          disabled:true,
          customInfoOptions:[],
          rules:{
            ownerId:[
              { required: true, message: "业主不能为空", trigger: "blur" }
            ]
          }
        }
      },
      watch: {
        currentNode(v) {
          this.initForm()
        },
      },
      created() {
        this.initForm()
        listCustomInfo().then(response => {
            this.customInfoOptions = response.rows;
        })
      },
      methods: {
        initForm() {
          this.reset();
          listVehicle({'carportId':this.currentNode.id}).then(response => {
            this.form = response.rows[0];
          })
        },
        // 表单重置
        reset() {
          this.form = {
            communityId: null,
            vehicleId: null,
            parkingId: null,
            carportId: null,
            plateNum: null,
            vehicleBrand: null,
            vehicleDiscern: null,
            ownerId: null,
            takeTime: null,
            loseTime: null,
            vehicleImg: null,
            totalPrice: null,
            deptId: null,
            ancestors: null,
            createBy: null,
            createTime: null,
            updateBy: null,
            updateTime: null,
            ownerName:null,
            cellPhoneNumber:null,
            idCard:null,
            birthDate:null,
            sex:null,
            customHeadImg:null,
          };
          this.resetForm("form");
        },
        /** 提交按钮 */
        submitForm() {
          this.$refs["form"].validate(valid => {
            if (valid) {
              updateVehicle(this.form).then(response => {
                this.msgSuccess("修改业主信息成功");
                this.$emit("ok")
              });
            }
          });
        },
      }

    }
</script>

<style scoped>

</style>
